<template>
  <!--  个性特征      -->
  <view
    class="allContainer"
    :style="[{ minHeight: contentMinHeightPx + 'px' }]"
  >
    <image :src="img1" class="petalType" />
    <image class="textImg" :src="partTextImgUrl" />
    <image class="imgFloatRight" :src="imgPavilion" />

    <view
      class="contentView"
      :style="[{ paddingRight: '32rpx' }, { paddingLeft: '32rpx' }]"
    >
      <view class="contentBack">
        <view v-for="(item, index) in personalityTraits" :key="index">
          <view
            :style="[
              { marginTop: '30rpx' },
              { display: 'flex' },
              { alignItems: 'center' },
            ]"
          >
            <view class="blackBox"> </view>
            <view>
              <span
                :class="
                  titleItem.color == 1 ? 'smallTitleGreen' : 'smallTitleRed'
                "
                v-for="(titleItem, titleIndex) in item.title"
                :key="titleIndex"
                >{{ titleItem.label }}</span
              >
            </view>
          </view>
          <view class="onePartContent">{{ item.desc }}</view>
        </view>
        <image :src="bottomImg" class="bottomImg" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  // components: {},
  props: {
    isBlur: {
      type: Boolean,
      default: false,
    },

    personalityTraits: {
      type: Array,
      default() {
        return [
          {
            title: [
              { color: "1", label: "测试测试测试" },
              { color: "2", label: "测试测试测试测试" },
            ],
            desc: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
          },
          {
            title: [
              { color: "1", label: "测试测试测试" },
              { color: "2", label: "测试测试测试测试" },
            ],
            desc: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
          },
          {
            title: [
              { color: "1", label: "测试测试测试" },
              { color: "2", label: "测试测试测试测试" },
            ],
            desc: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
          },
        ];
      },
    },
  },
  data() {
    return {
      bgUrl:
        "https://img3.job1001.com/ypMp/elan/images/career/careerAssessResult/bg_part1.png",
      partTextImgUrl: this.$imgBaseSelf + "career/careerAssessNew/title1.png",

      img1: "https://img3.job1001.com/ypMp/elan/images/career/careerAssessResult/bg_part7_2.png",
      bottomImg:
        "https://img3.job1001.com/ypMp/elan/images/career/careerAssessNew/bottom.png",
      imgPavilion:
        "https://img3.job1001.com/ypMp/elan/images/career/careerAssessResult/img_pavilion.png",

      contentHeightPx: 0,
      contentMinHeightPx: uni.upx2px(1100),
    };
  },

  onReady() {},

  mounted() {
    uni
      .createSelectorQuery()
      .in(this)
      .select(".allContainer")
      .boundingClientRect((rect) => {
        console.log("rect.height = " + rect.height);
        this.$emit("listenRect", rect, 1);
      })
      .exec();
  },
  methods: {
    loadMore() {},
  },
};
</script>

<style lang="scss" scoped>
.allContainer {
  position: relative;
  width: 100%;
  background-size: 100% auto;
  background-image: url($img-base + "career/careerAssessResult/bg_part1.png");
  background-repeat: no-repeat;
}

.petalType {
  position: absolute;
  width: 230rpx;
  height: 232rpx;
  right: 10rpx;
  top: -180rpx;
}
.bottomImg {
  position: absolute;
  width: 100%;
  height: 40rpx;
  right: 0rpx;
  bottom: 0rpx;
}

.textImg {
  height: 130rpx;
  width: 520rpx;
  image-rendering: -webkit-optimize-contrast;
  z-index: 9;
  position: relative;
}
.imgFloatRight {
  position: absolute;
  width: 380rpx;
  height: 277rpx;
  right: 0rpx;
  top: 80rpx;
  z-index: 9;
}
.contentBack {
  position: relative;
  width: 100%;
  margin-top: -10rpx;
  background: linear-gradient(
    to bottom,
    #8de5ba 0%,
    #ccf0d7 50rpx,
    #f6f4df 80rpx,
    #f9f7e5 100%
  );
  padding: 20rpx 0 50rpx 0;
  border-radius: 0 15rpx 15rpx 15rpx;
}
.blackBox {
  content: "";
  width: 10rpx;
  max-width: 10rpx;
  height: 38rpx;
  margin-top: 6rpx;
  margin-right: 20rpx;
  background: #000;
  color: #000;
  font-size: 26rpx;
}

.smallTitleGreen {
  font-size: 34rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #000;
  //line-height: 120rpx;
}

.smallTitleRed {
  font-size: 34rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ed5c22;
  //	line-height: 120rpx;
}
.onePartContent {
  padding: 30rpx 36rpx 50rpx;
  font-size: 30rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #555555;
  line-height: 56rpx;
}
</style>
